iT邦幫忙

2024 iThome 鐵人賽

DAY 30
2
JavaScript

Signal API in Angular系列 第 30

Day 30 - Angular 和 Signal 的未來

  • 分享至 

  • xImage
  •  

我的觀點是 Signal 是 Angular 的現在與未來。

我的理由:

  • Signal 比 RxJS 更容易學習,因為 API 的方法不足 5 個,而 RxJS 有這麼多的運算子。
  • Signal永遠不會取代Angular中的RxJS,但新的應用程式將更多地採用 Signal 來進行同步操作。
  • 組件生命週期方法(ngOnInt、ngOnChanges、ngAfterViewInit 等)在使用 signal 的應用程式中出現較少。
    • ngOnInit 的一個用例是初始化依賴於 Input decorator 的 Observables。這個問題得到了解決,因為 signal 是在 field initializations 期間創建的。
    • field initializations 期間的 viewChild.required()viewChildren()contentChild.required()contentChildren() 查詢元素。 ngAfterViewInitngAfterContentInit 在極少數情況下使用。
    • 任何 signal 變化都會使 markForCheck 標誌變髒,隨後的 change detection 會更新組件的 範本。自從採用 signal 以來,我使用 effect 的次數比 ngOnChanges方法還要多。
  • signalsignal inputs 是 type-safe 的並消除了棘手的錯誤。例如,signal(1) 推斷類型是數字,或 signal<T>() 宣告它需要 T 類型。另一方面, viewChild.required()viewChildren()viewChild()contentChild()contentChild.required()contentChildren() 函數可以使用 read 選項來提供準確的類型。
  • 最後,signal 在 Zoneless Angular 中發揮著重要作用。 signal 可以直接呼叫 change detection,從而消除基於 zone 的 change detection 的開銷。這減少了套件的大小,提高了效能,並減少了不必要的更新和重新渲染。

這些變更將會出現在 Angular v.19 中

It looks like #Angular v19 will have a set of signal based migrations with

Signal Inputs
new Outputs
Signal Queries

While I don't expect them to be perfect, they will help a lot to shift exisiting codebases to those new features.

Angular elements will finally support signal, signa input and the new output function in V19

我希望所有部落格文章和 Stackblitz 演示最終都能說服 Angular 開發人員開始在他們的專案中使用 signal。

鐵人賽的第 30 天到此結束。

參考:


上一篇
Day 29 - 測試 Signals
下一篇
Day 31 - 請不要使用 effect
系列文
Signal API in Angular39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

3
黃升煌 Mike
iT邦研究生 5 級 ‧ 2024-09-08 10:37:02

恭喜完賽,真是太厲害啦! /images/emoticon/emoticon08.gif

受大哥早幾年的鐵人賽啟發。今年我也參加提升自己的能力。

0
peace&love
iT邦新手 4 級 ‧ 2024-10-16 08:57:23

請問,原本生命週期(ngChange或afterViewInit)改成signal後,
監聽從一個變成很多個(ex.每個signal input都一個),
這樣效能會不會反而降低?

Angular 團隊的回應: "In principle - no.
Signals are guaranteed to recompute only once (for a given set of dependent values - no dependency change => no recompute) and will cache their value.
In this sense signals are optimized for repeated reads - no need to cache values manually (it is actually counter productive as requires more code and signals will do caching anyway)
"

Google translate:
保證訊號僅重新計算一次(對於給定的一組依賴值 - 無依賴關係更改 => 不重新計算)並將快取其值。
從這個意義上說,訊號針對重複讀取進行了最佳化 - 無需手動快取值(這實際上是適得其反的,因為需要更多程式碼,而訊號無論如何都會進行快取)

我要留言

立即登入留言